<template>
    <div>
        <!-- seach区域 -->
        <div class="seach">
            <span class="span-top">
                <span class="seachStatus">
                    {{$t('registrationtime')}}
                    <el-date-picker @change="huhuh" :placeholder="$t('plsset')" v-model="transTime" width="20%" type="daterange" :range-separator="$t('to')" :start-placeholder="$t('startdate')" :end-placeholder="$t('dateclosed')" format="yyyy-MM-dd" value-format="yyyy-MM-dd" size="mini"></el-date-picker>
                    <!-- <el-date-picker :placeholder="$t('plsset')" v-model="userlistForm.gmtCreateBegin" width="20%" type="date" format="yyyy-MM-dd HH:mm:ss" value-format="yyyy-MM-dd HH:mm:ss" size="mini"></el-date-picker> -->
                </span>
                <span class="seachCSC">
                    {{$t('nams')}}
                    <el-input v-model.trim="userlistForm.nickName" :placeholder="$t('plsipt')" size="mini"></el-input>
                </span>
                <span class="seachCSC">
                    {{$t('phnnum')}}
                    <el-input v-model.trim="userlistForm.mobile" :placeholder="$t('plsipt')" size="mini"></el-input>
                </span>
            </span>
            <span class="span-bottom">
                <span class="seachXAC">
                    {{$t('eml')}}
                    <el-input v-model.trim="userlistForm.email" :placeholder="$t('plsset')" size="mini"></el-input>
                </span>
            </span>
            <div class="NOUS">
                <el-button type="primary" @click="seach" size="mini" v-preventReClick>{{$t('qury')}}</el-button>
            </div>
        </div>
        <!-- 内容区域 -->
        <el-card class="cardBox">
            <el-table border style="width: 100%" :data="userlistTab">
                <el-table-column type="index" :label="$t('sernum')">
                </el-table-column>
                <el-table-column prop="nickName" :label="$t('uname')" min-width="158">
                </el-table-column>
                <el-table-column prop="userName" :label="$t('nams')" min-width="183">
                </el-table-column>
                <el-table-column prop="mobileShortNo" :label="$t('phnnum')" min-width="121">
                </el-table-column>
                <el-table-column prop="emailShortNo" :label="$t('eml')" min-width="159">
                </el-table-column>
                <el-table-column prop="userStatus" :label="$t('sta')">
                </el-table-column>
                <el-table-column prop="gmtCreate" :label="$t('creatime')" min-width="166">
                </el-table-column>
                <el-table-column :label="$t('opratn')" width="90" fixed="right">
                    <template slot-scope="scope">
                        <el-link type="primary" @click="detailsuserlist(scope.row)">{{$t('detls')}}</el-link>
                    </template>
                </el-table-column>
            </el-table>
            <!-- 分页 -->
            <el-pagination
                @size-change="handleSizeChange"
                @current-change="handleCurrentChange"
                :current-page="userlistForm.pageNum"
                :page-sizes="[10, 15, 20, 30]"
                :page-size="userlistForm.pageSize"
                layout="total, sizes, prev, pager, next, jumper"
                :total="total">
            </el-pagination>
        </el-card>
    </div>
</template>

<script>
import {
    getuserinfopagelist
} from '@/libs/reqlist.js'
import { getInitDate } from '@/libs/getDate.js'
import Cookies from 'js-cookie'
export default {
    data () {
        return {
            transTime: [],
            total: 0,
            userlistForm: {
                nickName: null,
                gmtCreateBegin: null,
                gmtCreateEnd: null,
                email: null,
                mobile: null,
                pageSize: 10,
                pageNum: 1
            },
            userlistTab: []
        }
    },
    methods: {
        getUserList () {
            getuserinfopagelist(JSON.stringify(this.userlistForm)).then(res => {
                if (res.data.code === '000000') {
                    this.total = res.data.data.total - 0
                    this.userlistTab = res.data.data.list
                    this.userlistTab.forEach(item => {
                        if (item.userStatus === '0') item.userStatus = this.$t('normal')
                        if (item.userStatus === '1') item.userStatus = this.$t('locking')
                        if (item.userStatus === '2') item.userStatus = this.$t('cancellation')
                        if (item.firstName !== undefined && item.middleName !== undefined && item.lasteName !== undefined) {
                            if (item.firstName !== null) {
                                item.userName = item.firstName
                                if (item.middleName !== null) {
                                    item.userName = item.userName + ' ' + item.middleName
                                    if (item.lasteName !== null) {
                                        item.userName = item.userName + ' ' + item.lasteName
                                        return false
                                    }
                                }
                                if (item.lasteName !== null) {
                                    item.userName = item.userName + ' ' + item.lasteName
                                }
                            }
                        }
                    })
                }
            })
        },
        seach () {
            this.userlistForm.pageNum = 1
            if (this.userlistForm.nickName === '') this.userlistForm.nickName = null
            if (this.userlistForm.mobile === '') this.userlistForm.mobile = null
            if (this.userlistForm.email === '') this.userlistForm.email = null
            if (this.transTime !== null) {
                this.userlistForm.gmtCreateBegin = this.transTime[0]
                this.userlistForm.gmtCreateEnd = this.transTime[1]
            }
            if (!this.transTime) {
                this.transTime = []
                this.userlistForm.gmtCreateBegin = null
                this.userlistForm.gmtCreateEnd = null
            }
            this.getUserList()
        },
        handleSizeChange (newSize) {
            this.userlistForm.pageSize = newSize
            this.getUserList()
        },
        // 监听总页数变化
        handleCurrentChange (newNum) {
            this.userlistForm.pageNum = newNum
            this.getUserList()
        },
        huhuh () {
            if (this.transTime !== null) {
                this.gmtCreateBegin = this.transTime[0].substr(0, 10).split('-').join('')
                this.gmtCreateEnd = this.transTime[1].substr(0, 10).split('-').join('')
            }
        },
        detailsuserlist (data) {
            Cookies.set('userinfo', data)
            this.$router.push('/sec/userdetails')
        }
    },
    mounted () {
        this.userlistForm.gmtCreateBegin = getInitDate(7, 0)
        this.userlistForm.gmtCreateEnd = getInitDate(0, 0)
        this.transTime.push(this.userlistForm.gmtCreateBegin)
        this.transTime.push(this.userlistForm.gmtCreateEnd)
        this.getUserList()
    }
}
</script>

<style lang="less" scoped>
@import './userList.less';
</style>
